<template>
	<view>
		<u-toast ref="uToast" />
		<view class="height-10">

		</view>

		<view class="u-flex user-box u-p-l-30 u-p-r-20 u-p-b-30">
			<view class="u-flex-1">
				<view class="u-font-18 u-p-b-20 pd-top10">{{nickname}}</view>
				<view class="u-font-14 u-tips-color">学号:{{username}}</view>
			</view>
		</view>

		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="star" title="正在占座" @click="goIsSeat()"></u-cell-item>
			</u-cell-group>
		</view>

		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="tags" title="编辑信息" @click="goEditInfo()"></u-cell-item>
				<u-cell-item icon="coupon" title="占座记录" @click="goSeatlog()"></u-cell-item>
			</u-cell-group>
		</view>

		<view class="u-m-t-20">
			<u-cell-group>
				<u-cell-item icon="order" title="提交反馈" @click="FeedBack()"></u-cell-item>
			</u-cell-group>
		</view>

		<u-popup mode="bottom" v-model="showFeedback" closeable="true" @close='close()'>
			<view class="content">
				<view class="">
					<u-form :model="feedBackForm" ref="feedBackFormRef" :errorType="['toast']">
						<u-form-item prop="notice">
							<u-input v-model="feedBackForm.notice"  type="textarea"
								maxlength=150 height=200 />
						</u-form-item>
					</u-form>
				</view>
				<view>
					<u-button type="success" :loading="buttonLoading" @click="submit()">确定</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				buttonLoading: false,
				showFeedback: false,
				nickname: uni.getStorageSync('userInfo').nickname,
				username: uni.getStorageSync('userInfo').username,
				feedBackForm: {
					nickname: '',
					username: '',
					notice: '',
					createTime: '',
				},
				feedBackFormRules: {
					notice: [{
						required: true,
						message: '反馈内容不能为空',
						trigger: "change"
					}]
				}
			}
		},
		methods: {
			goSeatlog(){
				uni.navigateTo({
					url: '/pages/Seat/Seatlog'
				})
			},
			goEditInfo() {
				uni.navigateTo({
					url: '/pages/User/EditInfo'
				})
			},
			goIsSeat(){
				uni.navigateTo({
					url: '/pages/Seat/IsSeat'
				})
			},
			FeedBack() {
				this.showFeedback = true
			},
			close() {
				this.$refs.feedBackFormRef.resetFields()
				this.feedBackForm.notice = ''
				this.showFeedback = false
			},
			submit() {
				this.$refs.feedBackFormRef.validate(valid => {
					if (!valid) return
					this.buttonLoading = true;
					this.feedBackForm.nickname = this.nickname
					this.feedBackForm.username = this.username
					this.feedBackForm.createTime = Number(new Date())
					console.log(this.feedBackForm, 8888)
					uni.request({
							url: "http://192.168.2.149:3000/notice/addNotice",
							method: "POST",
							data: this.feedBackForm
						})
						.then((res) => {
							console.log(res)
							if (res[1].data.status === "ok") {
								console.log(111)
								this.$refs.uToast.show({
									title: '新增反馈成功',
									type: 'success',
									position: 'top',
								})
								this.close()
							} else {
								this.$refs.uToast.show({
									title: '新增反馈失败',
									type: 'error',
									position: 'top',
								})
							}
							this.buttonLoading = false;
						})
				});
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.feedBackFormRef.setRules(this.feedBackFormRules);
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #ededed;
	}

	.pd-top10 {
		padding-top: 10px;
	}

	.camera {
		width: 54px;
		height: 44px;

		&:active {
			background-color: #ededed;
		}
	}

	.user-box {
		background-color: #fff;
	}

	.content {
		padding: 24rpx;
		text-align: center;
	}
</style>
